<!--
  Generated template for the LineAttendancePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on

  Ionic pages and navigation.
-->
<extendheader [title]="title">
  <button ion-button item-end icon-left class="left" (click)="back()">
    <ion-icon name="ios-arrow-back"></ion-icon>
    返回
  </button>
</extendheader>

<ion-content>
  <ion-refresher (ionRefresh)="Refresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="下拉加载"
      refreshingSpinner="circles"
      refreshingText="数据加载中...">
    </ion-refresher-content>
  </ion-refresher>

  <div class="lineAttendancePage">
    <ion-list>
      <ion-item *ngIf="productLineState">
        <ion-label (click)="choselinemethod()">
          <span *ngIf="titleState" class="leftIcon" [ngClass]="lineState?'leftIconColor':'leftIconColors'">{{lineState?"开工":"未开工"}}</span>
          <span class="linename">{{ProductionLine.name}}</span>
        </ion-label>

        <!--<ion-select [(ngModel)]="line"-->
                    <!--(ngModelChange)="getRrgionList()"-->
                    <!--[selectOptions]="{title:'产线选择',cssClass:'choseline'}"-->
                    <!--okText="确定"-->
                    <!--cancelText="取消">-->
          <!--<ion-option *ngFor="let line of AttendandceList" [value]="line">-->
              <!--{{line.name}}&nbsp;&nbsp;———&nbsp;&nbsp;{{line.state ? '已开工': '未开工'}}-->
          <!--</ion-option>-->

        <!--</ion-select>-->
      </ion-item>

      <div class="lineAttendanceBox" [ngClass]="lineState?'lineAttendanceBox':'lineAttendanceBoxHide'">

        <div class="orderData">
          <h3>生产单信息</h3>
          <p class="lineAttendanceBox_P">
            当前生产单
            <span>{{orderOne.orderNumber}}</span>
          </p>
          <p class="lineAttendanceBox_P">
            产品
            <span>{{orderOne.productName}}</span>
          </p>

          <ion-grid>
            <ion-row>
              <ion-col col-6>
                <p>计划数量(件) <span>{{orderOne.planQuantity}}</span></p>
              </ion-col>

              <ion-col col-6>
                <p>累计直通率(%) <span>{{orderOne.fpy}}</span></p>
              </ion-col>

              <ion-col col-6>
                <p>完成数量(件) <span>{{orderOne.doneQuantity}}</span></p>
              </ion-col>
            </ion-row>
          </ion-grid>
        </div>

        <div class="workOrder orderData">
          <div class="productsituation">
            <h3>今日生产情况</h3>
            <ion-grid>
              <ion-row>
                <ion-col col-6>
                  <p>计划数量(件) <span>{{orderTwo.todayPlanQuantity}}</span></p>
                </ion-col>

                <ion-col col-6>
                  <p>累计直通率(%) <span>{{orderTwo.todayfpy}}</span></p>
                </ion-col>

                <ion-col col-6>
                  <p>完成数量(件) <span>{{orderTwo.todayDoneQuantity}}</span></p>
                </ion-col>
              </ion-row>
            </ion-grid>
          </div>

          <div class="capacityChart">
            <h4>
              实际小时产能趋势图
            </h4>
            <p>
              标准产能(件/小时)
              <span>{{orderTwo.capacity}}</span>
            </p>
            <div id="main" style="height:220px;" auto></div>
          </div>

          <div class="defectStatistict">
            <h4>
              缺陷统计
            </h4>
            <p *ngIf="defect.length == 0">截止当前还没有缺陷产生</p>
            <ion-grid>
              <ion-row>
                <ion-col col-6 *ngFor="let list of defect">
                  <p>{{list.name}}</p>
                  <p>{{list.count}}</p>
                </ion-col>
              </ion-row>
            </ion-grid>
          </div>
        </div>
      </div>

      <!--<div class="lineAttendanceHide" [ngClass]="lineState?'lineAttendanceBoxHide':'lineAttendanceBoxShow'">-->
      <!--<img src="../../assets/imgs/123.png" alt="">-->
      <!--</div>-->
      <div [ngClass]="lineState?'lineAttendanceBoxHide':'lineAttendanceBoxShow'" style="width:100%;text-align:center;margin-top:80px;">
        <img src="./assets/imgs/errorinfo.png" alt="" style="width:50%;">
        <p *ngIf="productLineTextState" style="text-align:center;font-size:20px;color:#d4d7dd;">您尚未有任何产线</p>
        <p *ngIf="productLineState" style="text-align:center;font-size:20px;color:#d4d7dd;">{{lineState?"":"当前产线未开工"}}</p>
     </div>
    </ion-list>
  </div>
</ion-content>
